body {
  background-color: #e2eaee;
}
.transition{transition: all 0.3s ease-in-out;}
.rowmax{width: 100%;height: 0;}
.bbtn:active {
  transform: scale(0.93);
}
.shadow{box-shadow: 0 12px 20px -8px rgba(8, 11, 39, 0.3);}
.cardbox {
  border-radius: 10px;padding: 0.7em;
  background: rgba(206, 217, 221, 0.5);backdrop-filter: blur(6px);
  box-shadow: 10px 10px 20px rgba(63, 68, 70, 0.16),
    -10px -10px 20px rgba(231, 236, 241, 0.2),
    0 20px 40px -16px rgba(11, 20, 75, 0.4);
  border: #fff solid 1px;
}
.cardbox:hover {
  border: 1px solid black;
}
.cardbox:active {
  transform: scale(0.95) rotateZ(1.2deg);
}

/* input-so */
.input-so.input-container {
  width: 280px;
  position: relative;
}

.input-so .icon {
  position: absolute;
  right: 5px;
  top: calc(50% + 5px);
  transform: translateY(calc(-50% - 5px));
  padding: 10px 15px;
  cursor: pointer;
}

.input-so .input {
  width: 100%;
  height: 50px;
  padding: 10px;
  transition: 0.2s linear;
  border: 2.5px solid black;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.input-so .input:focus {
  outline: none;
  border: 0.5px solid black;
  box-shadow: -5px -5px 0px #3d6981;
}

.input-so.input-container:hover > .icon {
  animation: input-so 1s linear infinite;
}

@keyframes input-so {
  0%,
  100% {
    transform: translateY(calc(-50% - 5px)) scale(1);
  }

  50% {
    transform: translateY(calc(-50% - 5px)) scale(1.1);
  }
}


/* 提交按钮 */
.submitbtn {
  transition: all 0.3s ease-in-out;
}

.submitbtn {
  width: 150px;
  height: 60px;
  border-radius: 50px;
  background-image: linear-gradient(135deg, #feb692 0%, #ea5455 100%);
  box-shadow: 0 20px 30px -6px rgba(238, 103, 97, 0.5);
  outline: none;
  cursor: pointer;
  border: none;
  font-size: 24px;
  color: white;
}

.submitbtn:hover {
  transform: translateY(3px);
  box-shadow: none;
}

.submitbtn:active {
  transform: scale(0.93);
}

.lingbtn{background-image: linear-gradient(135deg, #6ada79 0%, #199419 100%);box-shadow: 0 20px 30px -6px rgba(97, 238, 156, 0.5);}